<template>
  <div class="q-after">
    <n-layout
      has-sider
      position="absolute"
      :native-scrollbar="false"
      class="q-out"
    >
      <!-- 侧边题目选择栏 -->
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="50"
        :width="150"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
      >
        <n-menu
          :collapsed="collapsed"
          :collapsed-width="50"
          :collapsed-icon-size="22"
          :options="menuOptions"
          @update:value="updateRouter"
        />
      </n-layout-sider>
      <n-layout
        style="min-height: 30vh"
        content-style="padding: 1vw"
        :native-scrollbar="false"
        class="q-menu"
      >
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </n-layout>
    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue';
import { NIcon } from 'naive-ui';
import {
  ListOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon,
  TrashBinOutline,
} from '@vicons/ionicons5';

function renderIcon(icon: any) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
import { useRouter } from 'vue-router';
const router = useRouter();

const collapsed = ref(false);
const qSelect = ref(null);

const menuOptions = [
  {
    label: '问卷列表',
    key: 'q-list',
    icon: renderIcon(BookIcon),
  },
  {
    label: '回收站',
    key: 'q-recycle',
    icon: renderIcon(TrashBinOutline),
  },
];

const updateRouter = (value: string) => {
  switch (value) {
    case 'q-list':
      router.push('/q/list/present');
      break;
    case 'q-recycle':
      router.push('/q/list/recycle');
      break;
  }
};
</script>

<style scoped lang="scss">
.q-out {
  background: url('@images/login-bg.png');
  // background-size: 100%;
  background-position: -10.7vw -33vh; /*这个是按从左往右，从上往下的百分比位置进行调整*/
}
.q-menu {
  background-color: rgb(255, 255, 255, 0.5);

  // background: url('@images/bg-1.png');
  // background-size: 100%;
  // background-position: 20% -0.5%; /*这个是按从左往右，从上往下的百分比位置进行调整*/

  height: 88vh;
}
// 左侧导航栏
div.n-layout-sider-scroll-container div {
  position: fixed;
  top: 12vh;
}
:deep(.n-layout-sider) .n-layout-toggle-bar {
  position: fixed;
  top: 45vh;
  right: auto;
}
:deep(.n-menu) .n-menu-item-content {
  padding-right: 35px !important;
}
//坍缩后宽度
:deep(.n-menu--collapsed) .n-menu-item {
  width: 3rem;
}
</style>
